/**
 * Created with hong.rong
 * Description:*
 * Date:2020/06/25
 */

import React from 'react'
import { Card, Col, DatePicker, Row, Tabs } from 'antd'
import { FormattedMessage, formatMessage } from 'umi'
import numeral from 'numeral'
import { Bar } from './Charts'
import styles from '../style.less'

const { RangePicker } = DatePicker
const { TabPane } = Tabs

const location = [
  '佘山站',
  '洞泾站',
  '九亭站',
  '七宝站',
  '泗泾站',
  '徐泾站',
  '宝山站',
]

const rankingListData = []
for (let i = 0; i < 7; i += 1) {
  rankingListData.push({
    title: location[i],
    total: 323234,
  })
}

const SalesCard = ({
  rangePickerValue,
  salesData,
  isActive,
  handleRangePickerChange,
  loading,
  selectDate,
}) => (
  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
    <div className={styles.salesCard}>
      <Tabs
        tabBarExtraContent={
          <div className={styles.salesExtraWrap}>
            <div className={styles.salesExtra}>
              <a
                className={isActive('today')}
                onClick={() => selectDate('today')}
              >
                今日
              </a>
              <a
                className={isActive('week')}
                onClick={() => selectDate('week')}
              >
                本周
              </a>
              <a
                className={isActive('month')}
                onClick={() => selectDate('month')}
              >
                本月
              </a>
              <a
                className={isActive('year')}
                onClick={() => selectDate('year')}
              >
                全年
              </a>
            </div>
            <RangePicker
              value={rangePickerValue}
              onChange={handleRangePickerChange}
              style={{ width: 256 }}
            />
          </div>
        }
        size="large"
        tabBarStyle={{ marginBottom: 24 }}
      >
        <TabPane tab="销售额" key="sales">
          <Row>
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <Bar height={295} data={salesData} />
              </div>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesRank}>
                <h4 className={styles.rankingTitle}>站点排名</h4>
                <ul className={styles.rankingList}>
                  {rankingListData.map((item, i) => (
                    <li key={item.title}>
                      <span
                        className={`${styles.rankingItemNumber} ${
                          i < 3 ? styles.active : ''
                        }`}
                      >
                        {i + 1}
                      </span>
                      <span
                        className={styles.rankingItemTitle}
                        title={item.title}
                      >
                        {item.title}
                      </span>
                      <span className={styles.rankingItemValue}>
                        {numeral(item.total).format('0,0')}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            </Col>
          </Row>
        </TabPane>
        <TabPane tab="访问量" key="views">
          <Row>
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <Bar height={292} data={salesData} />
              </div>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesRank}>
                <h4 className={styles.rankingTitle}>站点排名</h4>
                <ul className={styles.rankingList}>
                  {(rankingListData || []).reverse().map((item, i) => (
                    <li key={item.title}>
                      <span
                        className={`${styles.rankingItemNumber} ${
                          i < 3 ? styles.active : ''
                        }`}
                      >
                        {i + 1}
                      </span>
                      <span
                        className={styles.rankingItemTitle}
                        title={item.title}
                      >
                        {item.title}
                      </span>
                      <span>{numeral(item.total).format('0,0')}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </div>
  </Card>
)
export default SalesCard
